<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 10330
  Date: 2021/6/28
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/header.jsp"%>

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugs/zoom/css/ShopShow.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugs/zoom/css/MagicZoom.css" type="text/css" />
<script src="${pageContext.request.contextPath}/resources/plugs/zoom/js/MagicZoom.js" type="text/javascript"></script>

<script>
    function add(){
        $.post("${pageContext.request.contextPath}/cart?action=add",{goodsId:${goods.goods_id},goodsNum:$('#goodsNum').val()},
            function(result){

            if(result.success){
                $("#cartTitle").html("添加成功");
                $("#cart_msg").html("已将商品加入到购物车。");
            }else{
                $("#cartTitle").html("添加失败");
                $("#cart_msg").html("请重新选择商品。");
            }

            $("#cartModal").modal('show');
            $("#cart_msg").show();
            $("#cart_tab").hide();

        },"json");
    }

    function buy(){
        $.post("${pageContext.request.contextPath}/cart?action=add",{goodsId:${goods.goods_id},goodsNum:$('#goodsNum').val()},
            function(result){

                if(result.success){
                    location.href='/eshop0/order?action=getUserDeliveryAddress';
                }else{
                    $("#cartTitle").html("购买失败");
                    $("#cart_msg").html("请重新选择商品。");
                }

                $("#cartModal").modal('show');
                $("#cart_msg").show();
                $("#cart_tab").hide();

            },"json");
    }
</script>

<ul class="breadcrumb">
    <li>
        <a href="#">首页</a>
    </li>
    <li>
        <a href="#">${parentName}</a>
    </li>
    <li class="active">
        ${goods.goods_name}
    </li>
</ul>

<div class="row">
    <div class="col-md-4">

        <!-- 代码开始 -->
        <div id="tsShopContainer">
            <div id="tsImgS"><a href="${pageContext.request.contextPath}${goods.goods_pic}" title="Images" class="MagicZoom" id="MagicZoom"><img src="${pageContext.request.contextPath}${goods.goods_pic}" /></a></div>
            <div id="tsPicContainer">
                <div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
                <div id="tsImgSCon">
                    <ul>
                        <li onclick="showPic(0)" rel="MagicZoom"><img height="42" width="42" src="${pageContext.request.contextPath}${goods.goods_pic}" tsImgS="${pageContext.request.contextPath}${goods.goods_pic}" /></li>

                        <c:forEach items="${picList}" var="pic">
                            <li onclick="showPic(0)" rel="MagicZoom"><img height="42" width="42" src="${pageContext.request.contextPath}${pic.pic_url}" tsImgS="${pageContext.request.contextPath}${pic.pic_url}" /></li>
                        </c:forEach>

                    </ul>
                </div>
                <div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
            </div>
            <img class="MagicZoomLoading" width="16" height="16" src="${pageContext.request.contextPath}/resources/plugs/zoom/images/loading.gif" alt="Loading..." />
        </div>
        <!-- 引入放大镜效果脚本 -->
        <script src="${pageContext.request.contextPath}/resources/plugs/zoom/js/ShopShow.js"></script>
        <!-- 代码结束 -->

    </div>
    <div class="col-md-8">
        <h3>${goods.goods_name}</h3>
        <div class="panel panel-default">
            <div class="panel-body bg_goodsdetail">
                <p>促销价：<span class="price_red "><small>￥</small>${goods.goods_discount}</span></p>
                <p>原价：<span class="price"><small>￥</small>${goods.goods_price}</span></p>
                <p>已售出 <span style="color:gray">${goods.goods_sales}</span>件</p>
            </div>
        </div>
        <form id="fm_goods" class="form-inline" role="form"  method="post">

            <div class="row row_style">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="num">数量：</label>
                        <div id="num" class="input-group input-group-sm col-xs-4">
                            <input id="goodsNum" class="form-control" id="goodsSales" name="goodsSales" type="number" value="1" min="1"/>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="row row_style">
            <div class="col-md-12">

                <p class="p_height">运费：<small>￥</small>12</p>
                <p>
                    <button class="btn btn-primary btn-sm" type="submit" onclick="buy()">
                        立即购买
                    </button>
                    <button class="btn btn-primary btn-sm" type="button" onclick="add()">
                        加入购物车
                    </button>

                </p>
            </div>

        </div>
    </div>


</div>

<div class="row clearfix">
    <div class="col-md-12 column">

        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">商品详情</h3>
            </div>
            <div class="panel-body">
                <dl class="dl-horizontal">
                    <dt>宝贝详情</dt>
                    <dd>${goods.goods_disc}</dd>
                    <dt>产地</dt>
                    <dd>${goods.goods_origin}</dd>
                </dl>
                <hr>
                <div style="margin-top:20px" class="text-center">
                    <div>
                        <img alt="暂无图片" src="${pageContext.request.contextPath}${goods.goods_pic}" />
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<%@include file="/pages/common/footer.jsp"%>
